<template>
  <div class="nav-first-container" v-show="loading" id="readyDetail">
    <div class="bg-grey padding-b-54" >
        <div class="head-info">
          <van-row>
            <van-col :span="4">
              <template v-if="apps.pic" @click="checkIdCard(apps.uid)">
                <van-image class="head-img" radius="4px" :src="`${$common.filePath}${apps.pic}`"/>
              </template>
              <template v-else>
                <img class="head-img" src="../../assets/notification/head.png">
              </template>
            </van-col>
            <van-col :span="18" class="head-right margin-l-15">
              <p class="head-title van-ellipsis">{{ apps.title }}</p>
              <p class="head-desc van-ellipsis">{{apps.name}} 
                <span class="margin-l-20">{{apps.date}}</span></p>
            </van-col>
          </van-row>
        </div>
        <div class="margin-t-10">
          <van-cell-group :border="false" class="padding-tb-10">
            <van-cell title="标题" :value="apps.title" title-class="cell-left" value-class="cell-right" />
          </van-cell-group>
          <van-cell-group :border="false" v-for="(formItem, index) in forms" :key='index' class="padding-tb-10">
            <!-- 附件 -->
            <template v-if="formItem.inputtype == '2'">
              <van-cell :title="formItem.fromname" title-class="cell-left" value-class="cell-right" >
                <template slot="default">
                  <div v-if="formItem.inputvalue" v-for="(file,index) in formItem.inputvalue" class="form-file" :key="index" @click="previewFile(file)">
                    <img class="img-class" :src="$common.fileIcon(fileName(file, 'type'))">
                    <p class="van-multi-ellipsis--l2">
                      {{ fileName(file, 'fullName') }}
                    </p>
                  </div>
                </template>
              </van-cell>
            </template>
            <!-- 其余 -->
            <template v-else>
              <van-cell :title="formItem.fromname" :value="formItem.inputvalue" title-class="cell-left" value-class="cell-right" />
            </template>
          </van-cell-group>
          <!-- 公文正文 -->
          <van-cell-group :border="false"  class="padding-tb-10">
            <van-cell title="正文" title-class="cell-left" value-class="cell-right" >
              <template slot="default">
                <van-button v-if="apps.editor_content" type="info" size="small" plain @click="previewContent">点击查看</van-button>
              </template>
            </van-cell>
          </van-cell-group>
        </div>

        <!-- 流程附件 -->
        <template v-if="attachmentShow">
          <p class="progress">流程附件</p>
          <div class="attachment-class" v-for="(files, stepIndex) in stepData" :key="stepIndex" v-if="stepIndex == 0">
            <template v-if="files.file.length > 0">
              <p v-for="(att, attIndex) in files.file" :key="attIndex" @click.stop="previewComFile(att.fileaddr,att.filename)" class="file-flex margin-b-10">
                <img class="step-img" :src="$common.fileIcon(fileName(att.fileaddr, 'type'))">
                <span class="step-width van-ellipsis">{{att.filename}}</span>
              </p>
            </template>
            <template v-else>
              <p style="font-size: 14px;color: #333333;">没有附件！</p>
            </template>
          </div>
        </template>

        <p class="progress">流转意见</p>
        <div class="steps-container">
          <div class="steps" v-for="(res, index) in stepData" :key="`${index}流程`">
            <!-- pertype 3退回  0办理中  4等待办理中 1通过 2拒绝 5结束-->
            <!-- <div :class="(res.pertype == '0' || res.pertype == '4')?'step-circle':'step-circle circle-active'">{{res.list.flownum}}</div> -->
            <!-- 单人头像 -->
            <template v-if="res.appkey == '2'" @click="checkIdCard(res.entrustid?res.entrustid:res.uid)">
              <div class="flow-img">
                <template v-if="res.pic">
                  <van-image class="process-border-img" radius="4px" :src="`${$common.filePath}${res.pic}`"/>
                </template>
                <template v-else>
                   <img class="process-img" src="../../assets/notification/head.png">
                </template>
              </div>
            </template>
            <!-- 多人审批 头像 -->
            <template v-if="res.appkey == '1'">
              <div class="flow-img">
                <img class="process-img" src="../../assets/notification/head-group.png">
              </div>
            </template>
            <div class="step-line"></div>
            <div class="step-right">
              <!-- 单人审批 -->
              <template v-if="res.query.length <= 0">
                <h3 class="step-title-class">
                  <van-col :span="18">
                    <span class=" van-multi-ellipsis--l3">
                      {{res.list.flowname}}{{'(主办：'+ res.name }}
                      <!-- {{!!res.actf_name?'；会签：' + res.actf_name : ''}} -->
                      {{!!res.entrust?'；委托：'+ res.entrust +')' : ')'}}
                    </span>
                  </van-col>
                  <van-col :span="7" class="align-right">
                    <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                  </van-col>
                </h3>
                <!-- 单人审批 会签 -->
                <div v-for="(actf,index) in res.actf" :key="`${index}单会签`" class="margin-t-15">
                  <h4 class="step-title-class">
                    <van-col :span="17">
                      <span class="van-multi-ellipsis--l2 normal-flex">
                        <van-tag plain color="#F5A703" class="margin-r-10">会签人</van-tag>{{ actf.name }}
                      </span>
                    </van-col>
                    <van-col :span="7" class="align-right">
                      <span :class="getTypeclass(actf.pertype)">{{getTypename(actf.pertype)}}</span>
                    </van-col>
                  </h4>
                  <p class="step-time-class">{{actf.approvaldate}}</p>
                  <div class="step-container" >
                    <p v-if="actf.lnstructions" >{{actf.lnstructions}}</p>
                    <p class="step-file" v-if="actf.file.length > 0" v-for="(file,inindex) in actf.file" :key="inindex" @click="previewComFile(file.fileaddr,file.filename)">
                      <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                      <span class="step-width van-ellipsis">{{ file.filename }}</span>
                    </p>
                  </div>
                  <!-- 会签 的传阅 -->
                  <div v-for="(read,index) in actf.read" :key="`传阅${index}`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="24">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#82AFFF" class="margin-r-10">接收人</van-tag>{{ read.name }}<span style="font-size: 14px;color: #999999;">（{{actf.name}}分阅）</span>
                        </span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{read.approvaldate}}</p>
                    <div class="step-container">
                      <p v-if="read.lnstructions" >{{read.lnstructions}}</p>
                    </div>
                  </div>
                </div>
                <!-- 主办和委托是互斥关系，有主办就显示，有委托就不显示主办 -->
                <template v-if="!res.entrust">
                  <div v-if="res.actf && res.actf.length > 0" class="margin-t-15">
                    <h4 class="step-title-class ">
                      <van-col :span="17">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          {{ res.name }}
                        </span>
                      </van-col>
                      <van-col :span="7" class="align-right">
                        <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                      </van-col>
                    </h4>
                  </div>
                </template>
                <template v-else>
                  <div v-if="res.actf && res.actf.length > 0" class="margin-t-15">
                    <h4 class="step-title-class ">
                      <van-col :span="17">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#F5A703" class="margin-r-10">委托</van-tag>{{ res.entrust }}
                        </span>
                      </van-col>
                      <van-col :span="7" class="align-right">
                        <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                      </van-col>
                    </h4>
                  </div>
                </template>
                <p class="step-time-class">{{res.approvaldate}}</p>
                <div class="step-container q">
                  <p v-if="res.lnstructions">{{res.lnstructions}}</p>
                  <!-- 第一步的附件显示在公共附件区，这里不显示 -->
                  <p class="step-file" v-if="res.file.length > 0 && index > 0"  v-for="(file,fileindex) in res.file" :key="fileindex" @click="previewComFile(file.fileaddr,file.filename)">
                    <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                    <span class="step-width van-ellipsis">{{file.filename}}</span>
                  </p>
                </div>
                <!-- 传阅 -->
                <div v-for="(read,index) in res.read" :key="`传阅2${index}`" class="margin-t-15">
                  <h4 class="step-title-class">
                    <van-col :span="24">
                      <span class="van-multi-ellipsis--l2 normal-flex">
                        <van-tag plain color="#82AFFF" class="margin-r-10">接收人</van-tag>{{ read.name }}
                        <span style="font-size: 14px;color: #999999;">（{{res.name || res.entrust}}分阅）</span>
                      </span>
                    </van-col>
                  </h4>
                  <p class="step-time-class">{{read.approvaldate}}</p>
                  <div class="step-container">
                    <p v-if="read.lnstructions" >{{read.lnstructions}}</p>
                  </div>
                </div>
              </template>
              <!-- 多人审批 -->
              <template v-else>
                <h3 class="step-title-class">
                  <van-col :span="17">
                    <span class="van-multi-ellipsis--l3">
                      {{res.list.flowname}}{{'(主办：'+ res.name }}
                      <!-- {{!!res.actf_name?'；会签：' + res.actf_name : ''}} -->
                      {{!!res.entrust?'；委托：'+res.entrust +')' : ')'}}
                    </span>
                  </van-col>
                  <van-col :span="7" class="align-right">
                    <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                  </van-col>
                </h3>
                <!-- 会签 -->
                <div v-for="(actf,index) in res.actf" :key="`${index}多会签`" class="margin-t-15">
                  <h4 class="step-title-class">
                    <van-col :span="17">
                      <span class="van-multi-ellipsis--l2 normal-flex">
                        <van-tag plain color="#F5A703" class="margin-r-10">会签人</van-tag>{{ actf.name }}
                      </span>
                    </van-col>
                    <van-col :span="7" class="align-right">
                      <span :class="getTypeclass(actf.pertype)">{{getTypename(actf.pertype)}}</span>
                    </van-col>
                  </h4>
                  <p class="step-time-class">{{actf.approvaldate}}</p>
                  <div class="step-container" >
                    <p v-if="actf.lnstructions">{{actf.lnstructions}}</p>
                    <p class="step-file" v-if="actf.file.length > 0"  v-for="(file,index) in actf.file" :key="`${index}会签附件`" @click="previewComFile(file.fileaddr,file.filename)">
                      <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                      <span class="step-width van-ellipsis">{{file.filename}}</span>
                    </p>
                  </div>
                  <!-- 会签 的传阅 -->
                  <div v-for="(read,index) in actf.read" :key="`多人审批传阅${index}`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="24">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#82AFFF" class="margin-r-10">接收人</van-tag>{{ read.name }}<span style="font-size: 14px;color: #999999;">（{{actf.name}}分阅）</span>
                        </span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{read.approvaldate}}</p>
                    <div class="step-container">
                      <p v-if="read.lnstructions" >{{read.lnstructions}}</p>
                    </div>
                  </div>
                </div>
                <!-- 多人主办 -->
                <div v-for="(query,index) in res.query" :key="`${index}多人`" class="margin-t-15">
                  <h4 class="step-title-class">
                    <van-col :span="17">
                      <span class="van-multi-ellipsis--l2">
                        {{ query.name }}
                      </span>
                    </van-col>
                    <van-col :span="7" class="align-right">
                      <span :class="getTypeclass(query.pertype)">{{getTypename(query.pertype)}}</span>
                    </van-col>
                  </h4>
                  <p class="step-time-class">{{query.approvaldate}}</p>
                  <div class="step-container m" >
                    <p v-if="query.lnstructions">{{query.lnstructions}}</p>
                    <p class="step-file" v-if="query.file.length > 0" v-for="(file,index) in query.file" :key="`${index}附件`" @click="previewComFile(file.fileaddr,file.filename)">
                      <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                      <span class="step-width van-ellipsis">{{file.filename}}</span>
                    </p>
                  </div>
                  <!-- 会签 的传阅 -->
                  <div v-for="(read,index) in query.read" :key="`多人主办传阅${index}`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="24">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#82AFFF" class="margin-r-10">接收人</van-tag>{{ read.name }}<span style="font-size: 14px;color: #999999;">（{{query.name}}分阅）</span>
                        </span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{read.approvaldate}}</p>
                    <div class="step-container">
                      <p v-if="read.lnstructions" >{{read.lnstructions}}</p>
                    </div>
                  </div>
                </div>
                <!-- 公共附件 -->
                <!-- <div class="step-container s" v-if="res.file.length > 0">
                  <p class="step-file" :class="res.file.length > 0?'file-t-10':''" v-if="res.file.length > 0 && index > 0" v-for="(file,inindex) in res.file" :key="inindex" @click="previewComFile(file.url,file.filename)">
                    <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                    <span class="step-width van-ellipsis">{{ file.filename }}</span>
                  </p>
                </div> -->
              </template>
            </div>
          </div>
        </div> 
        <div class="edit-bottom-btns" ref="publishText">
          <van-image width="16" height="22" :src="require('../../assets/documents/pen.png')" class="margin-r-10"/>发表意见
        </div>
        <van-overlay :show="overlayShow" z-index="3" :lock-scroll="true" @click="overlayBack"/>
        <div class="message-class" ref="messageArea" @click="publish">
          <van-field v-model="contents" ref="messageInput" placeholder="请输入意见" class="message-input" @touchmove.stop.prevent/>
          <van-button v-show="btnVisiable" ref="messageSubmit" class="message-button" input-align="center" @click.stop="sumits">提交</van-button>
        </div>
    </div>
  </div>
  
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        loading: false,
        apps: {},//基本信息
        forms: [],//表单
        readData: [],//分享记录数据
        stepData: [],
        remain_done: [],

        inputVisiable: false,
        contents: "",
        btnVisiable: false,
        overlayShow: false,

        active: 0,
        attachmentShow: false,  //流程附件是否显示
      }
    },
    activated() {
      this.$toast({
        type: "loading",
        message: '加载中...',
        forbidClick: true
      })
      this.loading = false
      this.apps = {},//基本信息
      this.forms = [],//表单
      this.readData = [],//分享记录数据
      this.contents = "",
      this.stepData = [],
      this.attachmentShow = false,
      this.$bridge.callHandler('navTitle',{title: '公文详情'})
      if(this.$route.query.from && this.$route.query.from == 'origin') {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          responseCallback('h5 done!')
        })
      }else {
        this.$bridge.callHandler('navBack')
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          this.$router.push({name: "readyList"})
          responseCallback("go(-1)")
        })
      }
      
      this.getDetailInfo()
    },
    watch: {
      'content': {
        handler(newV, oldV) {
          // console.log(newV)
        }
      }
    },
    methods: {
      /**
       * 用户信息
       * @return {[type]} [description]
       */
      checkIdCard(uid) {
        // console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      },
      fileName(url, type) {
        let fullName   = !url.split('@daxsdfcsgr6time666@')[1] ? url : url.split('@daxsdfcsgr6time666@')[1]
        let pointCount = fullName.split('.').length
        let fileType   = fullName.split('.')[pointCount - 1]
        switch(type){
          case 'name':
            return fullName.split('.', pointCount - 1).join('.');
          case 'type':
            return fileType;
          case 'fullName':
          default:
            return fullName;
        }
      },
      /**
       * 预览-附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewFile(item) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName:  this.fileName(item, 'fullName') || item
        })
        window.open(`${this.$common.filePath}${item}?filename=${this.fileName(item, 'fullName')}`)
      },
      /**
       * 预览-正文
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewContent() {
        this.$bridge.callHandler('openNewView', {url: `${window.location.origin}/h5/#/richtext?appid=${this.apps.id}&userid=${this.$store.state.userId}&token=${this.$store.state.token}`})
      },
      /* 预览-流程附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewComFile(item,filename) {
        // console.log(item+filename)
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName: filename
        })
        window.open(`${this.$common.filePath}${item}?filename=${filename}`)
      },
      /**
       * 详情页信息
       * @return {[type]} [description]
       */
      getDetailInfo () {
        let config = {
          method: "post",
          url: `${this.$common.basePath}documentlist.php`,
          data: {
            do: "documentlist",
            appsid: this.$route.query.id,
            tpltype: this.$route.query.type,
            type: "2",
            tplid: this.$route.query.tplid,
            rid: this.$route.query.rid,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.apps = res.data.apps
          this.forms = res.data.from
          this.readData = res.data.read
          this.remain_done = res.data.remain_done
          this.stepData = res.data.workclass
          if (this.stepData[0].file.length > 0) {
            this.attachmentShow = true
          }
          this.contents = res.data.work.content //登录人的意见要默认赋值

          // 流程图
          // if (this.apps.flow_img) {
          //   this.$bridge.callHandler('showProcessImg', {
          //     url: `${this.$common.filePath}${this.apps.flow_img}`
          //   })
          // }
          this.$bridge.callHandler('navRight', {title: "流程图"})
          this.$bridge.registerHandler('navRightClicked', (data, callBack)  => {
            this.$bridge.callHandler('openNewView', {url: `${window.location.origin}/h5/#/gojsChart?id=${this.apps.id}&type=1&userid=${this.$store.state.userId}&token=${this.$store.state.token}`})
          })
          
          this.$nextTick( _ => {
            this.loading = true
            setTimeout( _ => {
              this.$toast.clear()
            },100)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 发表意见
       * @return {[type]} [description]
       */
      publish () {
        this.inputVisiable = true
        let allHeight = window.screen.height
        let showHeight = window.innerHeight
        this.$refs.messageArea.style.bottom = allHeight - showHeight
        // 点击时让文字隐藏，输入框显示出来
        this.$refs.publishText.style.opacity = 0;
        this.$refs.messageArea.style.opacity = 1;
        this.btnVisiable = true
        this.overlayShow = true
        this.$refs.messageInput.focus()
      },
      /**
       * 遮罩点击返回原状
       * @return {[type]} [description]
       */
      overlayBack() {
        this.$refs.publishText.style.opacity = 1;
        this.$refs.messageArea.style.opacity = 0;
        this.btnVisiable = false
        this.overlayShow = false
      },
      /**
       * 提交按钮
       * @return {[type]} [description]
       */
      sumits () {
        // console.log(this.contents)
        if (!this.contents) {
          this.$toast("您没有填写阅读意见")
        } else {
          let config = {
            method: "POST",
            url: `${this.$common.basePath}documentlist.php`,
            data: {
              user_id: this.$store.state.userId,
              rid: this.$route.query.rid,
              content: this.contents,
              do: 'read'
            }
          }
          this.$axios(config).then(res => {
            this.$toast({
              message: '提交成功',
              forbidClick: true
            })
            this.$nextTick(_ => {
              this.getDetailInfo()
            })
            // 点击时让文字隐藏，输入框显示出来
            this.$refs.publishText.style.opacity = 1;
            this.$refs.messageArea.style.opacity = 0;
            this.btnVisiable = false
            this.overlayShow = false
          }).catch(err => {
            this.$toast(err.msg)
          })
        }
      },
      /**
       * 返回样式类名
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      getTypeclass(type) {
        let typeclass = ''
        switch(type) {
          case '0'://办理中
            typeclass = 'ing-color'
            break;
          case '1'://通过
            typeclass = 'pass-color'
            break;
          case '2'://拒绝
            typeclass = 'defined-color'
            break;
          case '3'://退回
            typeclass = 'defined-color'
            break;
          case '4'://等待办理中
            typeclass = 'ing-color'
            break;
          case '5'://结束
            typeclass = 'defined-color'
            break;
          default:
            typeclass = 'defined-color'
        }
        return typeclass;
      },
      getTypename(type) {
        let typename = ""
        switch(type) {
          case '0':
            typename = '办理中'
            break;
          case '1':
            typename = '通过'
            break;
          case '2':
            typename = '拒绝'
            break;
          case '3':
            typename = '退回'
            break;
          case '4':
            typename = '等待办理中'
            break;
          case '5'://结束
            typename = '结束'
          default:
            typename = '结束'
        }
        return typename;
      },
    }
  }
</script>

<style type="text/css" lang="less" scoped> 
  p{
    margin: 0;
  }
  .margin-t-10 {
    margin-top: 10px;
  }
  .padding-b-12 {
    padding-bottom: 12.5px;
  }
  .margin-l-15 {
    margin-left: 15px;
  }
  .margin-b-10 {
    margin-bottom: 10px;
  }
  .margin-r-10 {
    margin-right: 6px;
  }
  .padding-b-54 {
    padding-bottom: 54px;
  }
  .margin-l-20 {
    margin-left: 20px;
  }
  .padding-tb-10:first-child{
    padding-top: 10px;
  }
  .padding-tb-10:last-child{
    padding-bottom: 10px;
  }
  .nav-content {
    height: calc(100vh - 55px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  // head-info 开始
  .head-info {
    background-color: #fff;
    padding: 15px;
    width: calc(100vw - 30px);
  }
  .head-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
  .head-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .head-title{
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 5px;
    width: 100%;
  }
  .head-desc {
    color: #999999;
    font-size: 14px;
  }
  // head-info 结束
  // 中间表单部分 开始
  .van-cell {
    padding: 1px 15px;
  }
  .cell-left {
    color: #999999;
    font-size: 15px;
    max-width: 63px;
    text-align: right;
    padding-right: 15px;
    line-height: 18px;
    // display: flex;
    // align-items:center;
    // justify-content: flex-end;
  }
  .cell-right {
    text-align: left;
    color: #333333;
    font-size: 15px;
    line-height: 18px;
  }
  .img-class {
    width: 20px;
    height: 23px;
    margin-right: 10px;
  }
  .form-file {
    background-color: #F5F5F5;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 12px;
    line-height: normal;
  }
  // 中间表单部分 结束
  // 下一步流程设定 样式结束
  .progress {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #999999;
  }
  // van-card 开始
  .van-card__thumb {
    width: auto;
    height: auto;
    margin-right: 15px;
  }
  .van-card__content{
    padding-bottom: 15px;
    border-bottom: 1px solid #F5F5F5;
    min-height: auto;
  }
  .van-card {
    margin-top: 0!important;
    background-color: #fff!important;
    padding: 15px 15px 0 15px;
  }
  .title-class {
    font-size: 17px;
    color: #333333;
  }
  .desc-info-class {
    font-size: 14px;
    color: #999999;
    margin-top: 5px;
  }
  .desc-content {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #F5F5F5;
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    border-radius: 4px;
  }
  // van-card 结束
  .edit-bottom-btns {
    padding: 2px 15px;
    width: calc(100vw - 30px);
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 3;
    height: 50px;
    color: #2E79FF;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #F5F5F5;
    opacity: 1;
  }
    // 传阅
  .cells-group{
    margin: 10px 0;

    .label-right{
      font-size: 14px;
      color: #333333;
    }
    .tag-class{
      padding: 0 16px 10px 16px;
    }
    .more-btn{
      color: #2E79FF;
      font-size: 14px;
    }
    .add-btn{
      width: 45px;
      height: 45px;
      background-color: #F5F5F5;
      color: #979797;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    .tag-img{
      width: 45px;
      height: 45px;
      border-radius: 4px;
    }
    .tag-text{
      font-size: 14px;
      color: #333333;
      text-align: center;
    }
    .delete-icon{
      position: relative;
      top: -22px;
      left: 58%;
      z-index: 3;
      background-color: #fff;
      border-radius: 50%;
    }
  }
  .flow-img {
    z-index: 3;
    display: inline-block;
    position:absolute;
    left:0px;
    top:0px;

    img{
      z-index:5;
      width: 40px;
      height: 40px;
    }
    .process-img {
      z-index:5;
      width: 40px;
      height: 40px;
    }
    .process-border-img {
      z-index:5;
      width: 36px;
      height: 36px;
      border: 2px solid #fff;
    }
  }
</style>
<style type="text/css" lang="less">
   .message-class {
      min-height: 48px;
      padding: 12px 14px;
      width: calc(100vw - 28px);
      display: flex;
      background-color: #fff;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      bottom: 0;
      z-index: 99;
      opacity: 0;

    .message-input {
      background-color: #F5F5F5;
      border-radius: 4px;
      height: 100%;
      line-height: 48px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: row;
      margin-right: 15px;
      padding: 0 15px;
    }

    .message-button {
      min-width: 70px;
      height: 48px;
      background-color: #2E79FF;
      border-radius: 4px;
      color: #fff;
      font-size: 17px;
    }
  }
  .file-flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>
<style type="text/css" lang="less">
  #readyDetail {
    .van-cell-group {
      .van-cell {
        padding: 5px 15px;
        line-height: normal;
      }
    }
    .van-tab span {
      font-size: 15px;
    }
    .van-tabs__wrap {
      // padding: 0 20px;
      background-color: #fff;
    }
    .van-tabs__line {
      // width: 64px!important;
    }
    .van-hairline--top-bottom::after {
      // border: none;
    }
  }
</style>